<template>
  <div class="healthy-page">
    <div class="head" v-if="topList.type == 0" :style="{ background: this.background_color }">
      <div class="header-box">
        <div class="location">
          <img src="../../assets/img/dinwei.png" alt="" class="dw" />
          <p class="city-name">{{ LocationCity }}</p>
        </div>
        <div class="inp-box" @click="toSearch">点击输入搜索内容</div>
        <div class="sys-box" @click="hanleIntersection()">
          <img src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/sysa.png" alt="" class="imgs" />
        </div>
      </div>
      <div>
      <div class="draw-box" v-if="shop_id==905" style=" width: 9.253333rem;height: 4.4rem;background: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/xdbj.png') no-repeat;background-size: 9.253333rem 4.4rem;">
          <div class="draw-left" v-for="(item, index) in lunars" :key="index" style="background:url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/20.png') no-repeat;">
            <div class="riqi">
              <p class="days">{{ item.y }}</p>
              <p class="yy-mm">{{ item.ym }}</p>
            </div>
            <div class="n-year">{{ item.lunarYear }}</div>
            <div class="n-month">{{ item.lunar }}</div>
            <div class="suit-box">
              <img src="../../assets/img/suit.png" alt="" />
              <p class="suit" style="color:#fff">{{ item.sy }}</p>
            </div>
            <div class="ji-box">
              <img src="../../assets/img/ji.png" alt="" />
              <p class="ji" style="color:#fff">{{ item.av }}</p>
            </div>
          </div>
          <div class="draw-right" >
            <div class="right-top" style="background:url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/21.png') no-repeat">
              <p class="title" style="color:#fff">{{ topList.rightTop.title }}</p>
              <p class="content" style="font-size:.3rem;color:#fff">{{ topList.rightTop.content }}</p>
            </div>
            <div class="right-bottom" style="background:url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/21.png') no-repeat">
              <p class="title" style="color:#fff">{{ topList.rightBottom.title }}</p>
              <p class="content" style="font-size:.28rem;color:#fff">{{ topList.rightBottom.content }}</p>
            </div>
          </div>
        </div>
        <div class="draw-box" v-else>
          <div class="draw-left" v-for="(item, index) in lunars" :key="index">
            <div class="riqi">
              <p class="days">{{ item.y }}</p>
              <p class="yy-mm">{{ item.ym }}</p>
            </div>
            <div class="n-year">{{ item.lunarYear }}</div>
            <div class="n-month">{{ item.lunar }}</div>
            <div class="suit-box">
              <img src="../../assets/img/suit.png" alt="" />
              <p class="suit">{{ item.sy }}</p>
            </div>
            <div class="ji-box">
              <img src="../../assets/img/ji.png" alt="" />
              <p class="ji">{{ item.av }}</p>
            </div>
          </div>
          <div class="draw-right">
            <div class="right-top">
              <p class="title" style="color:#fff">{{ topList.rightTop.title }}</p>
              <p class="content" style="font-size:.3rem">{{ topList.rightTop.content }}</p>
            </div>
            <div class="right-bottom">
              <p class="title" style="color:#fff">{{ topList.rightBottom.title }}</p>
              <p class="content" style="font-size:.28rem">{{ topList.rightBottom.content }}</p>
            </div>
          </div>
        </div>
      </div>
      <div v-if="shop_id==905">
        <div class="mj_list" >
          <div class="mj_item" v-for="(item, index) in goodsLists" :key="index" @click="goodsDetails(item)">
            <img class="hot" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/22222222.png" alt="">
            <div class="left">
              <img :src="Config_ysy.img_url + item.images[0]" alt="">
            </div>
            <div class="right">
              <div class="right_title">{{item.goods_name}}</div>
              <div class="right_price">
                <p class="line">￥{{item.spec[0].goods_price}}</p>
                <p class="lines">￥{{item.spec[0].line_price}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="nav-box" v-else>
        <div class="navtagor" v-if="column_type == 2">
          <div class="classify-box" v-for="(item, index) in classifyList" :key="index">
            <div v-if="item.type == '商品栏目'" @click="toGoods(item)">
              <img :src="Config_ysy.img_url + item.image" alt="" class="tea-img"/>
              <p class="tea-name">{{ item.name }}</p>
            </div>
            <div v-if="item.type == '功能栏目'" @click="toTypeUrl(item.url, item.name)">
              <img :src="Config_ysy.img_url + item.image" alt="" class="tea-img"/>
              <p class="tea-name">{{ item.name }}</p>
            </div>
          </div>
        </div>
        <div class="navtagors" v-if="column_type == 0" style="display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;">
          <div class="classify-box" style="margin-top: 0.266667rem; width: 33.33%; text-align: center" v-for="(item, index) in classifyList.slice(0, 6)" :key="index">
            <div v-if="item.type == '商品栏目'" @click="toGoods(item)">
              <img :src="Config_ysy.img_url + item.image"  alt="" class="tea-img" style="width: 1.853333rem; height: 1.813333rem"/>
              <p class="tea-name" style="font-size: 0.333333rem;color: #6e6e6e;margin-top: 0.066667rem;">{{ item.name }}</p>
            </div>
            <div v-if="item.type == '功能栏目'" @click="toTypeUrl(item.url, item.name)">
              <img :src="Config_ysy.img_url + item.image" alt="" class="tea-img" style="width: 1.853333rem; height: 1.813333rem"/>
              <p class="tea-name" style="font-size: 0.333333rem;color: #6e6e6e;margin-top: 0.066667rem;">
                {{ item.name }}
              </p>
            </div>
          </div>
        </div>
        <div class="navtagorss" v-if="column_type == 1" style="display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;">
          <div class="classify-box" v-for="(item, index) in classifyList.slice(0, 8)" :key="index" style="margin-top: 0.266667rem; width: 25%; text-align: center">
            <div v-if="item.type == '商品栏目'" @click="toGoods(item)">
              <img :src="Config_ysy.img_url + item.image" alt="" class="tea-img" style="width: 1.853333rem; height: 1.813333rem"/>
              <p class="tea-name" style="font-size: 0.333333rem;color: #6e6e6e;margin-top: 0.066667rem;">
                {{ item.name }}
              </p>
            </div>
            <div v-if="item.type == '功能栏目'" @click="toTypeUrl(item.url, item.name)">
              <img :src="Config_ysy.img_url + item.image" alt="" class="tea-img" style="width: 1.853333rem; height: 1.813333rem"/>
              <p class="tea-name" style="font-size: 0.333333rem;color: #6e6e6e;margin-top: 0.066667rem;">
                {{ item.name }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div  class="head" v-if="topList.type == 1" :style="{ background: this.background_color }">
      <div class="header-box">
        <div class="location">
          <img src="../../assets/img/dinwei.png" alt="" class="dw" />
          <p class="city-name">{{ LocationCity }}</p>
        </div>
        <div class="inp-box" @click="toSearch">点击输入搜索内容</div>
        <div class="sys-box" @click="hanleIntersection()">
          <img src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/sysa.png" alt="" class="imgs" />
        </div>
      </div>
      <div>
        <div class="show-imgs">
          <div class="left-imgs">
            <img :src="Config_ysy.sc_url + topList.topList.leftimg[0]" alt="" />
          </div>
          <div class="right-imgs">
            <div class="right-top-img">
              <img :src="Config_ysy.sc_url + topList.topList.rightTopImg[0]" alt=""/>
            </div>
            <div class="right-bottom-img">
              <img :src="Config_ysy.sc_url + topList.topList.rightbottomImg[0]" alt=""/>
            </div>
          </div>
        </div>
      </div>
      <div v-if="shop_id==905">
        <div class="mj_list" >
          <div class="mj_item" v-for="(item, index) in goodsLists" :key="index" @click="goodsDetails(item)">
            <img src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/22222222.png" class="hot" alt="">
            <div class="left">
              <img :src="Config_ysy.img_url + item.images[0]" alt="">
            </div>
            <div class="right">
              <div class="right_title">{{item.goods_name}}</div>
              <div class="right_price">
                <p class="line">￥{{item.spec[0].goods_price}}</p>
                <p class="lines">￥{{item.spec[0].line_price}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="nav-box" v-else>
        <div class="navtagor" v-if="column_type == 2">
          <div class="classify-box" v-for="(item, index) in classifyList" :key="index">
            <div v-if="item.type == '商品栏目'" @click="toGoods(item)">
              <img :src="Config_ysy.img_url + item.image"  alt="" class="tea-img"/>
              <p class="tea-name">{{ item.name }}</p>
            </div>
            <div v-if="item.type == '功能栏目'"  @click="toTypeUrl(item.url, item.name)">
              <img :src="Config_ysy.img_url + item.image" alt="" class="tea-img"/>
              <p class="tea-name">{{ item.name }}</p>
            </div>
          </div>
        </div>
        <div class="navtagors" v-if="column_type == 0" style="display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;">
          <div class="classify-box" style="margin-top: 0.266667rem; width: 33.33%; text-align: center" v-for="(item, index) in classifyList.slice(0, 6)" :key="index">
            <div v-if="item.type == '商品栏目'" @click="toGoods(item)">
              <img :src="Config_ysy.img_url + item.image" alt="" class="tea-img" style="width: 1.466667rem; height: 1.44rem"/>
              <p class="tea-name" style="font-size: 0.333333rem;color: #6e6e6e;margin-top: 0.066667rem;">
                {{ item.name }}
              </p>
            </div>
            <div v-if="item.type == '功能栏目'" @click="toTypeUrl(item.url, item.name)">
              <img :src="Config_ysy.img_url + item.image" alt="" class="tea-img" style="width: 1.466667rem; height: 1.44rem"/>
              <p class="tea-name" style="font-size: 0.333333rem;color: #6e6e6e;margin-top: 0.066667rem;">
                {{ item.name }}
              </p>
            </div>
          </div>
        </div>
        <div class="navtagorss" v-if="column_type == 1" style="display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;">
          <div class="classify-box" v-for="(item, index) in classifyList.slice(0, 8)" :key="index" style="margin-top: 0.266667rem; width: 25%; text-align: center">
            <div v-if="item.type == '商品栏目'" @click="toGoods(item)">
              <img :src="Config_ysy.img_url + item.image" alt="" class="tea-img" style="width: 1.466667rem; height: 1.44rem"/>
              <p class="tea-name" style=" font-size: 0.333333rem; color: #6e6e6e; margin-top: 0.066667rem;">
                {{ item.name }}
              </p>
            </div>
            <div v-if="item.type == '功能栏目'"  @click="toTypeUrl(item.url, item.name)">
              <img :src="Config_ysy.img_url + item.image" alt="" class="tea-img" style="width: 1.466667rem; height: 1.44rem"/>
              <p class="tea-name" style="font-size: 0.333333rem;color: #6e6e6e;margin-top: 0.066667rem;">
                {{ item.name }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="grad" v-if="topList.type == 2">
      <div class="img-box">
        <img v-for="(item, index) in graphList.imgs" :key="index" :src="Config_ysy.sc_url + item"  alt=""/>
        <div class="header-box">
          <div class="location">
            <img src="../../assets/img/bstb.png" alt="" class="dw" />
            <p class="city-name">{{ LocationCity }}</p>
          </div>
          <div class="inp-box" @click="toSearch">点击输入搜索内容</div>
          <div class="sys-box" @click="toKefu()">
            <img class="sys" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/kf.png" alt=""/>
          </div>
        </div>
      </div>
      <div v-if="shop_id==905">
        <div class="mj_list" >
          <div class="mj_item" v-for="(item, index) in goodsLists" :key="index" @click="goodsDetails(item)">
            <img src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/22222222.png" class="hot" alt="">
            <div class="left">
              <img :src="Config_ysy.img_url + item.images[0]" alt="">
            </div>
            <div class="right">
              <div class="right_title">{{item.goods_name}}</div>
              <div class="right_price">
                <p class="line">￥{{item.spec[0].goods_price}}</p>
                <p class="lines">￥{{item.spec[0].line_price}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="nav-box" v-else>
        <div class="navtagor" v-if="column_type == 2">
          <div class="classify-box" v-for="(item, index) in classifyList" :key="index">
            <div v-if="item.type == '商品栏目'" @click="toGoods(item)">
              <img :src="Config_ysy.img_url + item.image"  alt="" class="tea-img"/>
              <p class="tea-name">{{ item.name }}</p>
            </div>
            <div v-if="item.type == '功能栏目'" @click="toTypeUrl(item.url, item.name)">
              <img :src="Config_ysy.img_url + item.image" alt="" class="tea-img"/>
              <p class="tea-name">{{ item.name }}</p>
            </div>
          </div>
        </div>
        <div class="navtagors" v-if="column_type == 0" style="display: flex;justify-content: space-between;align-items: center; flex-wrap: wrap;">
          <div class="classify-box" style="margin-top: 0.266667rem; width: 33.33%; text-align: center"  v-for="(item, index) in classifyList.slice(0, 6)" :key="index">
            <div v-if="item.type == '商品栏目'" @click="toGoods(item)">
              <img :src="Config_ysy.img_url + item.image"  alt="" class="tea-img"  style="width: 1.466667rem; height: 1.44rem"/>
              <p class="tea-name" style="font-size: 0.333333rem;color: #6e6e6e;margin-top: 0.066667rem;">
                {{ item.name }}
              </p>
            </div>
            <div v-if="item.type == '功能栏目'"  @click="toTypeUrl(item.url, item.name)">
              <img :src="Config_ysy.img_url + item.image"  alt=""  class="tea-img" style="width: 1.466667rem; height: 1.44rem"/>
              <p class="tea-name" style="font-size: 0.333333rem;color: #6e6e6e;margin-top: 0.066667rem;">
                {{ item.name }}
              </p>
            </div>
          </div>
        </div>
        <div class="navtagorss"  v-if="column_type == 1" style="display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;">
          <div class="classify-box"  v-for="(item, index) in classifyList.slice(0, 8)"  :key="index"  style="margin-top: 0.266667rem; width: 25%; text-align: center">
            <div v-if="item.type == '商品栏目'" @click="toGoods(item)">
              <img  :src="Config_ysy.img_url + item.image"  alt=""  class="tea-img"  style="width: 1.466667rem; height: 1.44rem"/>
              <p  class="tea-name"  style="font-size: 0.333333rem;color: #6e6e6e;margin-top: 0.066667rem;">
                {{ item.name }}
              </p>
            </div>
            <div v-if="item.type == '功能栏目'" @click="toTypeUrl(item.url, item.name)">
              <img :src="Config_ysy.img_url + item.image"   alt="" class="tea-img" style="width: 1.466667rem; height: 1.44rem"/>
              <p class="tea-name"  style="font-size: 0.333333rem;color: #6e6e6e;margin-top: 0.066667rem;">
                {{ item.name }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-box">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banner" :key="index">
          <div class="banner-img">
            <img :src="Config_ysy.img_url + item" />
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="star-box">
      <div class="star-head" v-if="shop_id==905">
        <div class="lefts">
          <img :src="background_img" alt="" />
          <span style="font-weight: 600;">关于我们</span>
        </div>
        <div class="rights"></div>
      </div>
       <div class="star-head" v-else>
        <div class="lefts">
          <img :src="background_img" alt="" />
          <span>明星产品</span>
        </div>
        <div class="rights" @click="toStoreDetail()">进入商城 ></div>
      </div>
      <div class="star_conter" v-if="shop_id==905">
          <div class="star_goods" @click="shows3">
            <img src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/6.jpg" alt="" class="sp">
            <img src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/play.png" alt="" class="play">
            <div class="wen">公司介绍</div>
          </div>
          <div class="star_goods" @click="shows1">
            <img src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/7.jpg" alt="" class="sp">
            <img src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/play.png" alt="" class="play">
            <div class="wen">鲜米介绍</div>
          </div>
          <div class="star_goods" @click="shows2" style="margin-right:0">
            <img src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/szmd/8.jpg" alt="" class="sp">
            <img src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/play.png" alt="" class="play">
            <div class="wen">胚芽米介绍</div>
          </div>
      </div>
      <div class="star-conter" v-else>
        <div v-for="(item, index) in starList" :key="index">
          <div class="star-goods" v-if="item.type == '商品栏目'" @click="goodsDetail(item)">
            <img :src="Config_ysy.img_url + item.images[0]" alt="" />
            <p class="wen">{{ item.goods_name }}</p>
            <p class="price">{{ item.spec[0].goods_price }}</p>
          </div>
          <div class="star-goods" v-if="item.type == '功能栏目'" @click="toTypeUrl(item.url, item.name)">
            <img :src="Config_ysy.img_url + item.image" alt="" />
            <p class="wen">{{ item.name }}</p>
          </div>
        </div>
      </div>
      <div class="star_footer" v-if="shop_id==905">
        <div class="daohans">
          <div class="d_list" v-for="(item,index) in mldList" :key="index" @click="toNewds(item.id,item.title)">
            <img :src="Config_ysy.img_url +item.a_image" alt="" class="list_img">
            <div class="list_t">{{item.title}}</div>
          </div>
        </div>
      </div>
      <div class="star-footer" v-else>
        <div class="daohan" v-for="(item, index) in proudceList.slice(0, 4)" :key="index">
          <div v-if="item.type == '商品栏目'" @click="toGoods(item)">
            <img :src="Config_ysy.img_url + item.image" alt="" />
            <p class="dwc">{{ item.name }}</p>
          </div>
          <div v-if="item.type == '功能栏目'" @click="toTypeUrl(item.url, item.name)">
            <img :src="Config_ysy.img_url + item.image" alt="" />
            <p class="dwc">{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="consult-box" style="padding-bottom: 0.8rem">
      <div class="consult-head">
        <div class="lefts">
          <img :src="background_img" alt="" />
          <span style="font-weight: 600;">行业资讯</span>
        </div>
        <div class="rights" @click="toInfo">更多资讯 ></div>
      </div>
      <div class="consult-conter" @click="toArticle(item.id)" v-for="(item, index) in consultList" :key="index">
        <div class="conter-right">
          <img :src="Config_ysy.img_url + item.a_image" alt="" />
        </div>
        <div class="conter-left">
          <div class="title">{{ item.title }}</div>
          <div class="sub">{{item.subtitle}}</div>
          <div class="jituan">
            <span class="jts">{{ item.addtime | formatDate3 }}</span>
            <span></span>
          </div>
        </div>
      </div>
    </div>
    <div class="limit-head"></div>
    <div class="tushi" v-if="tushi">
      <span>敬请期待</span>
    </div>
    <!-- 视频1 -->
    <div class="show_vd" v-if="video1&&shop_id==905"  @click="close"></div>
     <div class="show_v"  v-if="video1&&shop_id==905">
        <div class="close" @click="close">关闭</div>
        <video-player
          class="video-player vjs-custom-skin exemption"
          ref="videoPlayer"
          poster
          :playsinline="true"
          :options="playerOptionss"
        ></video-player>
      </div>
      <!-- 视频2 -->
      <div class="show_vds" v-if="video2&&shop_id==905"  @click="close1"></div>
      <div class="show_vs" v-if="video2&&shop_id==905">
        <div class="close" @click="close1">关闭</div>
        <video-player
          class="video-player vjs-custom-skin exemption"
          ref="videoPlayer"
          poster
          :playsinline="true"
          :options="playerOptionsss"
        ></video-player>
      </div>
      <!-- 视频3 -->
      <div class="show_vds" v-if="video3&&shop_id==905"  @click="close2"></div>
      <div class="show_vs" v-if="video3&&shop_id==905">
        <div class="close" @click="close2">关闭</div>
        <video-player
          class="video-player vjs-custom-skin exemption"
          ref="videoPlayer"
          poster
          :playsinline="true"
          :options="playerOptionsss"
        ></video-player>
      </div>

      <!-- 底部导航 -->
    <div class="bottom-tab" v-if="shop_id == 905">
      <div class="bottom-tab-item-sider" v-for="(item, index) in bottomTabLists" :key="index" @click="changeTab(item.id)">
        <img v-if="curTab == item.id" class="first-img" :src="item.imgOn" alt=""/>
        <img
          v-if="curTab != item.id"
          class="first-img"
          :src="item.imgOff"
          alt=""
        />
        <span
          :class="
            curTab == item.id ? 'text-position text-ons' : 'text-position'
          "
          >{{ item.name }}</span
        >
      </div>
    </div>
    <div class="bottom-tab" v-else>
      <div
        class="bottom-tab-item-sider"
        v-for="(item, index) in bottomTabList"
        :key="index"
        @click="changeTab(item.id)"
      >
        <img
          v-if="curTab == item.id"
          class="first-img"
          :src="item.imgOn"
          alt=""
        />
        <img
          v-if="curTab != item.id"
          class="first-img"
          :src="item.imgOff"
          alt=""
        />
        <span
          :class="curTab == item.id ? 'text-position text-on' : 'text-position'"
          >{{ item.name }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem, Toast } from "vant";
import { formatDate } from "../../untils/date";
// import map from "../../untils/map";
import {
  // riliData,
  classifyData,
  healthyData,
  starData,
  starsData,
  consultData,
  heeadDatas,
  mjlg,
  newX,
  mjgoods,
  mjzsp
} from "../../sever/request";
import { UserData } from "../../sever/team";
import { wsx } from "../../sever/lt";
export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Toast.name]: Toast,
  },
  data() {
    return {
      lat: "",
      lng: "",
      classifyList: [],
      banner: [],
      starList: [],
      proudceList: [],
      consultList: [],
      token: "94dccd14-23e3-4c2a-b3c3-731a16799629",
      lunars: {},
      LocationCity: "昆明市",
      topList: {},
      curTab: 1,
      bottomTabList: [
        {
          id: 1,
          name: "首页",
          imgOff: require("../../assets/newTab/home.png"),
          imgOn: require("../../assets/newTab/home_select.png"),
          url: "/pages/center/ai",
        },
        {
          id: 2,
          name: "商城",
          imgOff: require("../../assets/newTab/business.png"),
          imgOn: require("../../assets/newTab/business_select.png"),
          // url: "/pages/center/cate",
        },
        {
          id: 3,
          name: "任务",
          imgOff: require("../../assets/newTab/rewu_select.png"),
          imgOn: require("../../assets/newTab/rewu.png"),
          // url: "/pages/center/center",
          center: true,
        },
        {
          id: 4,
          name: "课程",
          imgOff: require("../../assets/newTab/kecheng_select.png"),
          imgOn: require("../../assets/newTab/kecheng.png"),
          // url: "/pages/center/cart",
        },
        // {
        //   id: 5,
        //   name: "消息",
        //   imgOff: require("../../assets/newTab/news.png"),
        //   imgOn: require("../../assets/newTab/news_select.png"),
        //   // url: "/pages/center/user",
        // },
        {
          id: 5,
          name: "我的",
          imgOff: require("../../assets/newTab/mine.png"),
          imgOn: require("../../assets/newTab/mine_select.png"),
          // url: "/pages/center/user",
        },
      ],
      bottomTabLists: [
        {
          id: 1,
          name: "首页",
          imgOff: require("../../assets/tabber/index.png"),
          imgOn: require("../../assets/tabber/index_select.png"),
          url: "/pages/center/ai",
        },
        {
          id: 2,
          name: "商城",
          imgOff: require("../../assets/tabber/shop.png"),
          imgOn: require("../../assets/tabber/shop_select.png"),
          // url: "/pages/center/cate",
        },
        {
          id: 3,
          name: "任务",
          imgOff: require("../../assets/tabber/sever.png"),
          imgOn: require("../../assets/tabber/sever_select.png"),
          // url: "/pages/center/center",
          center: true,
        },
        {
          id: 4,
          name: "课程",
          imgOff: require("../../assets/tabber/course.png"),
          imgOn: require("../../assets/tabber/course_select.png"),
          // url: "/pages/center/cart",
        },
        // {
        //   id: 5,
        //   name: "消息",
        //   imgOff: require("../../assets/newTab/news.png"),
        //   imgOn: require("../../assets/newTab/news_select.png"),
        //   // url: "/pages/center/user",
        // },
        {
          id: 5,
          name: "我的",
          imgOff: require("../../assets/tabber/mine.png"),
          imgOn: require("../../assets/tabber/mine_select.png"),
          // url: "/pages/center/user",
        },
      ],
      tushi: false,
      shop_id: 96,
      background_color: "",
      graphList: {},
      background_img: "",
      column_type: 0,
      newsNumber: null,
      newsList: [],
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "", //url地址https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/rice/%E4%BC%9A%E8%AF%9D%E6%96%87%E4%BB%B6_1634554950.MP4
          },
        ],
        poster:
          "", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "视频无法播放", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
       playerOptionss: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "", //url地址
          },
        ],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "视频无法播放", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
      playerOptionsss: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "", //url地址
          },
        ],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "视频无法播放", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
       video1: false,
      video2: false,
      video3: false,
      mldList:[],
      goodsLists:[]
    };
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy.MM.dd");
    },
    formatDate2(time) {
      var date = new Date(time);
      return formatDate(date, "hh:mm:ss");
    },
    formatDate3(time) {
      time = time * 1000;
      var date = new Date(time);
      return formatDate(date, "yyyy年MM月dd日 hh:mm:ss");
    },
  },
  moutend() {},

  created() {
    let store = this.$route.query;
    if (store.shop_id != undefined) {
      this.shop_id = store.shop_id;
      // sessionStorage.setItem("shop_id", JSON.stringify(this.shop_id));
    }
    if (store.token != "" && store.token != undefined) {
      this.token = store.token;
    }
    this.getlocation();
    sessionStorage.setItem("lat", JSON.stringify(this.lat));
    sessionStorage.setItem("lng", JSON.stringify(this.lng));
    this.getUser();
    this.getClassifyData();
    this.getBannerData();
    this.getStarData();
    this.getConsult();
    this.getStarsdata();
    // this.getContent();
    this.getHeadData();
    this.getMjlg();
    this.getMjd()
    this.getGoods()
    this.getMjzsp()
  },
  methods: {
  //视频显示关闭
   shows1() {
      this.video1 = true;
    },
    shows2() {
      this.video2 = true;
    },
    shows3() {
      this.video3 = true;
    },
    close() {
      this.video1 = false;
    },
    close1() {
      this.video2 = false;
    },
    close2() {
      this.video3 = false;
    },
    getMjd(){
        newX({
           token: this.token,
           shop_id: this.shop_id,
           type_id:7
        }).then(res=>{
            if(res.data.code==1){
              this.mldList=res.data.data
            }
        })
    },
  getMjzsp() {
      mjzsp({
        token: this.token,
        shop_id: this.shop_id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.playerOptions.sources[0].src = res.data.data.file;
        }
      });
    },
     getGoods() {
      mjgoods({
        token: this.token,
        shop_id: this.shop_id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.goodsLists = res.data.data;
        }
      });
    },

     getMjlg() {
      mjlg({
        token: this.token,
        shop_id: this.shop_id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.playerOptionss.sources[0].src = res.data.data.freshrice.file;
          this.playerOptionsss.sources[0].src =
            res.data.data.germinatedrice.file;
        }
      });
    },
    getUser() {
      UserData({ token: this.token }).then((res) => {
        if (res.data.code == 1) {
          let mycenter_user = res.data.data.nickname;
          wsx({ user: mycenter_user }).then((res) => {
            if (res.data.code == 1) {
              this.newsList = res.data.data;
              for (let i in this.newsList) {
                this.newsNumber += parseInt(this.newsList[i].count);
              }
            }
          });
        }
      });
    },

    showTs() {
      this.tushi = true;
      setTimeout(() => {
        this.tushi = false;
      }, 1000);
    },

    // 跳文章详情
    toArticle(id) {
      this.$router.push({
        path: "../article",
        query: { token: this.token, id: id },
      });
    },
    //鲜米
    toNewds(id,name){
        this.$router.push({
        path: "../xmInfo",
        query: { token: this.token, id: id,name:name },
      });
    },
    // 栏目跳商品列表

    toGoods(item) {
      console.log(item.category_id);
      this.$router.push({
        path: "../goodsList",
        query: { token: this.token, category_id: item.category_id },
      });
    },

    toTypeUrl(url, name) {
      if (name == "数据报表") {
        this.$toast({
          message: "此功能暂未开放",
        });
        return;
      }
      var urlStr = url; //encodeURI(url)//把字符串作为url进行编码
      console.log(urlStr);
      if (urlStr.indexOf("/pages") == -1) {
        if (urlStr.indexOf("?") == -1) {
          window.location.href =
            urlStr + "?token=" + this.token + "&shop_id=" + this.shop_id;
        } else {
          window.location.href =
            urlStr + "&token=" + this.token + "&shop_id=" + this.shop_id;
        }
      } else {
        let urls = urlStr + "&token=" + this.token;
        // console.log(99999,urls);
        uni.navigateTo({
          url: urls,
        });
      }
      console.log(url);
    },

    // 跳转资讯列表

    toInfo() {
      this.$router.push({
        path: "../info",
        query: { token: this.token, shop_id: this.shop_id },
      });
    },
    // 跳转商城详情
    toStoreDetail() {
      console.log("进入了1111");
      uni.navigateTo({
        url: "/pages/storeDetails/storeDetails?id=" + this.shop_id,
      });
    },

    // 跳转商品详情
    goodsDetail(item) {
      uni.navigateTo({
        url:
          "/pages/productDetail/productDetail?id=" +
          item.goods_id +
          "&type=1&goods_max_price=" +
          item.spec[0].line_price +
          "&goods_min_price=" +
          item.spec[0].goods_price,
      });
    },
  goodsDetails(item) {
      uni.navigateTo({
        url:
          "/pages/productDetail/productDetail?id=" +
          item.goods_id +
          "&type=1&goods_max_price=" +
          item.spec[0].line_price +
          "&goods_min_price=" +
          item.spec[0].goods_price,
      });
    },
    //底部导航
    changeTab(id) {
      this.curTab = id;
      if (id == 2) {
        uni.navigateTo({
          url: "/pages/saasShop/equity",
        });
      } else if (id == 3) {
        uni.navigateTo({
          url: "/pages/center/center",
        });
      } else if (id == 4) {
        uni.navigateTo({
          url: "/pages/center/cart",
        });
      } else if (id == 5) {
        uni.navigateTo({
          url: "/pages/center/user",
        });
      }
    },

    getHeadData() {
      heeadDatas({
        token: this.token,
        shop_id: this.shop_id,
      }).then((res) => {
        if (res.data.code == 1) {
          this.topList = res.data.data; //万年历
          this.lunars = res.data.data.calendar;
          this.background_color = res.data.data.background;
          this.graphList = res.data.data.topList;
        }
      });
    },

    //扫一扫
    hanleIntersection() {
      this.$uni.getEnv(function (res) {
        if (res.plus) {
          console.log("当前环境为【5+App】");
        } else if (res.miniprogram) {
          console.log("当前环境为【微信小程序】");
        }
      });
      this.$uni.postMessage({
        data: {
          action: "message", //扫码功能
        },
      });
    },

    // 跳转搜索页面
    toSearch() {
      this.$router.push({
        path: "../search",
        query: { token: this.token, shop_id: this.shop_id },
      });
    },
    toKefu() {
      uni.navigateTo({
        url: "/pages/user_chat/news_list",
      });
    },

    //  定位

    getlocation() {
      //获取定位
      let mapObj = new AMap.Map("iCenter", {
        resizeEnable: true,
      });
      //添加AMap.Geolocation插件
      AMap.plugin("AMap.Geolocation", function () {
        //使用插件以及插件的配置
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
          buttonOffset: new AMap.Pixel(10, 20),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: "RB",
        });
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, "complete", onComplete);
        AMap.event.addListener(geolocation, "error", onError);

        function onComplete(data) {
          // data是具体的定位信息
          this.LocationCity = data.addressComponent.city;
          this.lat = data.position.lat;
          this.lng = data.position.lng;
          console.log(data);
        }

        function onError(data) {
          // 定位出错
          console.log(data);
          getLngLatLocation();
        }
        const self = this;
        function getLngLatLocation() {
          AMap.plugin("AMap.CitySearch", function () {
            var citySearch = new AMap.CitySearch();
            citySearch.getLocalCity(function (status, result) {
              if (status === "complete" && result.info === "OK") {
                // 查询成功，result即为当前所在城市信息
                console.log(result);
                AMap.plugin("AMap.Geocoder", function () {
                  var geocoder = new AMap.Geocoder({
                    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                    city: result.adcode,
                  });
                  var lnglat = result.rectangle.split(";")[0].split(",");
                  geocoder.getAddress(lnglat, function (status, data) {
                    if (status === "complete" && data.info === "OK") {
                      // result为对应的地理位置详细信息
                      console.log(status, result, data);
                    }
                  });
                });
              }
            });
          });
        }
      });
    },

    // 栏目
    getClassifyData() {
      classifyData({
        token: this.token,
        shop_id: this.shop_id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.classifyList = res.data.data.data;
          this.column_type = res.data.data.tip;
        }
      });
    },
    // 轮播
    getBannerData() {
      healthyData({
        token: this.token,
        shop_id: this.shop_id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.banner = res.data.data.bannerList;
        }
      });
    },
    // 明星产品
    getStarData() {
      starData({
        token: this.token,
        shop_id: this.shop_id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.starList = res.data.data.list;
          this.background_img = res.data.data.xtb;
        }
      });
    },
    getStarsdata() {
      starsData({
        token: this.token,
        shop_id: this.shop_id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.proudceList = res.data.data;
        }
      });
    },

    // 咨询
    getConsult() {
      consultData({
        token: this.token,
        shop_id: this.shop_id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.consultList = res.data.data;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.healthy-page {
  width: 10rem;
  position: relative;
  .head {
    padding-top: 0.786667rem;
    width: 100%;
    background: linear-gradient(to top, #e8ecc0, #c9d067);
    .header-box {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      // margin: 0 0.266667rem;
      .location {
        text-align: center;
         margin-left: .4rem;
        .dw {
          width: 0.44rem;
          height: 0.586667rem;
        }
        .city-name {
          font-size: 0.3rem;
          color: #fff;

          overflow: hidden; /*超出部分隐藏*/
          white-space: nowrap; /*不换行*/
          text-overflow: ellipsis; /*超出部分文字以...显示*/
          width: 1rem;
        }
      }
      .inp-box {
         width: 6.9rem;
          height: 0.68rem;
        background-color: #e0e3e0;
        border-radius: 0.133333rem;
        opacity: 0.56;
        margin-left: 0.3rem;
        text-align: center;
        line-height: 0.68rem;
        color: #a4a4a4;
        font-size: 0.36rem;
      }
      .sys-box {
        width: .6rem;
        height: .6rem;
        margin-left: 0.366667rem;
        .imgs {
          width: .6rem;
        height: .6rem;
        }
      }
    }
    .draw-box {
      margin: 0.533333rem 0.373333rem 0 0.373333rem;
      width: 9.253333rem;
      height: 4.4rem;
      background: url("../../assets/img/bj.png") no-repeat;
      background-size: 9.253333rem 4.4rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .draw-left {
        width: 3.626667rem;
        height: 4.4rem;
        background: url("../../assets/img/bj1.png") no-repeat;
        background-size: 3.626667rem 4.4rem;
        position: relative;
        .riqi {
          position: absolute;
          top: 0.293333rem;
          left: 0.493333rem;
          width: 1.146667rem;
          height: 0.8rem;
          .days {
            font-size: 0.613333rem;
            color: #fff;
            font-weight: bold;
            text-align: center;
          }
          .yy-mm {
            font-size: 0.346667rem;
            color: #fff;
            font-weight: bold;
          }
        }
        .n-year {
          width: 0.426667rem;
          line-height: 0.533333rem;
          font-size: 0.426667rem;
          color: #fff;
          font-weight: bold;
          margin-left: 0.533333rem;
          margin-top: 1.766667rem;
        }
        .n-month {
          width: 0.426667rem;
          line-height: 0.533333rem;
          font-size: 0.426667rem;
          color: #fff;
          font-weight: bold;
          position: absolute;
          top: 1.5rem;
          left: 1.2rem;
        }
        .suit-box {
          position: absolute;
          left: 2.026667rem;
          top: 0.32rem;
          img {
            width: 0.466667rem;
            height: 0.426667rem;
          }
          .suit {
            width: 0.346667rem;
            line-height: 0.533333rem;
            font-size: 0.32rem;
            color: #2c3322;
            margin-left: 0.066667rem;
          }
        }
        .ji-box {
          position: absolute;
          top: 0.32rem;
          right: 0.426667rem;
          img {
            width: 0.466667rem;
            height: 0.426667rem;
          }
          .ji {
            width: 0.346667rem;
            line-height: 0.533333rem;
            font-size: 0.32rem;
            color: #2c3322;
            margin-left: 0.066667rem;
          }
        }
      }
      .draw-right {
        .right-top {
          width: 5.333333rem;
          height: 2.133333rem;
          background: url("../../assets/img/bj2.png") no-repeat;
          background-size: 5.333333rem 2.133333rem;
          .title {
            font-size: 0.4rem;
            color: #2e3424;
            font-weight: bold;
            padding-top: 0.16rem;
            margin-left: 0.266667rem;
          }
          .content {
            padding-top: 0.533333rem;
            font-size: 0.24rem;
            color: #2c3322;
            margin-left: 0.266667rem;
          }
        }
        .right-bottom {
          width: 5.333333rem;
          height: 2.133333rem;
          margin-top: 0.293333rem;
          background: url("../../assets/img/bj2.png") no-repeat;
          background-size: 5.333333rem 2.133333rem;
          .title {
            font-size: 0.4rem;
            color: #2e3424;
            font-weight: bold;
            padding-top: 0.16rem;
            margin-left: 0.266667rem;
          }
          .content {
            font-size: 0.24rem;
            color: #2c3322;
            padding-top: 0.56rem;
            margin-left: 0.266667rem;
          }
        }
      }
    }
    .show-imgs {
      margin: 0.533333rem 0.373333rem 0 0.373333rem;
      width: 9.253333rem;
      height: 4.4rem;
      display: flex;
      justify-content: flex-start;
      .left-imgs {
        width: 3.626667rem;
        height: 4.4rem;
        img {
          width: 3.626667rem;
          height: 4.4rem;
        }
      }
      .right-imgs {
        margin-left: 5px;
        .right-top-img {
          width: 5.333333rem;
          height: 2.133333rem;
          img {
            width: 5.333333rem;
            height: 2.133333rem;
          }
        }
        .right-bottom-img {
          width: 5.333333rem;
          height: 2.133333rem;
          margin-top: 0.133333rem;
          img {
            width: 5.333333rem;
            height: 2.133333rem;
          }
        }
      }
    }
    .mj_list{
      margin:.4rem auto 0 ;
      width: 9.466667rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .mj_item{
        width: 48%;
        height: 2.8rem;
        box-shadow: .053333rem .04rem .2rem .04rem rgba(0, 0, 0, 0.25), 0px 0px .04rem 0px rgba(0, 0, 0, 0.22);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: .133333rem;
        margin-right: 2%;
        position: relative;
        .hot{
          position: absolute;
          top: 0;
          right: 0;
          width: 1.706667rem;
          height: .453333rem;
        }
        .left{
          padding: .2rem 0 0 .2rem;
          img{
            width: 1.56rem;
           height: 2.2rem;
          }
        }
        .right{
          margin-left: .333333rem;
          .right_title{
             width: 2.666667rem;
             font-size: .4rem;
             font-weight: 600;
             color: #444;
              overflow: hidden; /*超出部分隐藏*/
             white-space: nowrap; /*不换行*/
             text-overflow: ellipsis; /*超出部分文字以...显示*/
          }
          .right_price{
            margin-top: .4rem;
            .line{
                font-size: .346667rem;
                color: #f5222d;
            }
            .lines{
              font-size: .26rem;
              color: #999;
              text-decoration:line-through;
              margin-top: .133333rem;
            }
          }
        }
      }
      .mj_item:nth-child(2){
        margin-left: .133333rem;
      }
    }
    .nav-box {
      padding: 0.4rem 0 0.4rem 0;
      background-color: #fff;
      .navtagor {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        // border-bottom: .026667rem solid #dadada;
        .classify-box {
          margin-top: 0.266667rem;
          width: 20%;
          // margin-left: 0.133333rem;
          text-align: center;
          .tea-img {
            width: 1.853333rem;
            height: 1.813333rem;
            border-radius: 50%;
          }
          .tea-name {
            font-size: 0.333333rem;
            color: #6e6e6e;
            margin-top: 0.066667rem;
          }
        }
      }
    }
  }

  .grad {
    width: 10rem;
    .img-box {
      width: 100%;
      height: 6.426667rem;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      .header-box {
        display: flex;
        justify-content: flex-start;
        position: absolute;
        top: 0.933333rem;
        left: 0.266667rem;
        .location {
          text-align: center;
          .dw {
            width: 0.44rem;
            height: 0.586667rem;
          }
          .city-name {
            font-size: 0.3rem;
            color: #fff;
            margin-left: 0.066667rem;
            overflow: hidden; /*超出部分隐藏*/
            white-space: nowrap; /*不换行*/
            text-overflow: ellipsis; /*超出部分文字以...显示*/
            width: 0.9rem;
            height: 0.38rem;
            line-height: 0.38rem;
          }
        }
        .inp-box {
          width: 6.9rem;
          height: 0.68rem;
          background-color: #e0e3e0;
          box-shadow: 0px 0.04rem 0.093333rem 0px rgba(0, 0, 0, 0.36);
          border-radius: 0.133333rem;
          border: solid 1px #b4b3b3;
          opacity: 0.56;
          margin-left: 0.4rem;
          text-align: center;
          line-height: 0.68rem;
          color: #a4a4a4;
          font-size: 0.36rem;
        }
        .sys-box {
          width: .6rem;
          height: .6rem;
          margin-left: 0.45rem;
          .imgs {
           width: .6rem;
          height: .6rem;
          }
        }
      }
    }
    .mj_list{
      margin:.4rem auto 0 ;
      width: 9.466667rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .mj_item{
        width: 48%;
        height: 2.8rem;
        box-shadow: .053333rem .04rem .2rem .04rem rgba(0, 0, 0, 0.25), 0px 0px .04rem 0px rgba(0, 0, 0, 0.22);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: .133333rem;
        margin-right: 2%;
         position: relative;
        .hot{
          position: absolute;
          top: 0;
          right: 0;
          width: 1.706667rem;
          height: .453333rem;
        }
        .left{
          padding: .2rem 0 0 .2rem;
          img{
            width: 1.56rem;
           height: 2.2rem;
          }
        }
        .right{
          margin-left: .333333rem;
          .right_title{
             width: 2.666667rem;
             font-size: .4rem;
             color: #444;
             font-weight: 600;
              overflow: hidden; /*超出部分隐藏*/
             white-space: nowrap; /*不换行*/
             text-overflow: ellipsis; /*超出部分文字以...显示*/
          }
          .right_price{
            margin-top: .4rem;
            font-size: .346667rem;
            color: #f5222d;
          }
        }
      }
    }
    .mj_list{
      margin:.4rem auto 0 ;
      width: 9.466667rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .mj_item{
        width: 48%;
        height: 2.8rem;
        box-shadow: .053333rem .04rem .2rem .04rem rgba(0, 0, 0, 0.25), 0px 0px .04rem 0px rgba(0, 0, 0, 0.22);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: .133333rem;
        margin-right: 2%;
         position: relative;
        .hot{
          position: absolute;
          top: 0;
          right: 0;
          width: 1.706667rem;
          height: .453333rem;
        }
        .left{
          padding: .2rem 0 0 .2rem;
          img{
            width: 1.56rem;
           height: 2.2rem;
          }
        }
        .right{
          margin-left: .333333rem;
          .right_title{
             width: 2.666667rem;
             font-size: .4rem;
             font-weight: 600;
             color: #444;
              overflow: hidden; /*超出部分隐藏*/
             white-space: nowrap; /*不换行*/
             text-overflow: ellipsis; /*超出部分文字以...显示*/
          }
          .right_price{
            margin-top: .4rem;
            font-size: .346667rem;
            color: #f5222d;
          }
        }
      }
    }
    .nav-box {
      padding: 0.4rem 0 0.4rem 0;
      background-color: #fff;
      .navtagor {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        // border-bottom: .026667rem solid #dadada;
        .classify-box {
          margin-top: 0.266667rem;
          width: 18%;
          margin-left: 0.133333rem;
          text-align: center;
          .tea-img {
            width: 1.853333rem;
            height: 1.813333rem;
            border-radius: 50%;
          }
          .tea-name {
            font-size: 0.333333rem;
            color: #6e6e6e;
            margin-top: 0.066667rem;
          }
        }
      }
    }
  }

  // 轮播图
  .swiper-box {
     width:9.466667rem;
     margin: .4rem auto 0;
    height: 3.706667rem;
    .banner-img {
      width:9.466667rem;
      height: 3.706667rem;
      img {
        width:9.466667rem;
        height: 3.706667rem;
      }
    }
  }

  // 明星
  .star-box {
    width: 10rem;
    // border-top: 0.026667rem solid #c3c1c1;
    // border-bottom: 0.026667rem solid #c3c1c1;
    margin-top: 0.346667rem;
    .star-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 0.233333rem 0.333333rem 0.133333rem 0.333333rem;
      .lefts {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img {
          width: 0.693333rem;
          height: 0.6667rem;
        }
        span {
          font-size: 0.42rem;
          color: #333;
        }
      }
      .rights {
        font-size: 0.38rem;
        color: #656565;
        cursor: pointer;
      }
    }


  //  视频
    .rice_gde {
      width: 9.706667rem;
      margin: -0.6rem auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .vide_left {
        width: 4.84rem;
        height: 3.946667rem;
        //   position: relative;
        margin-top: 0.533333rem;
        //   overflow: hidden;
        // object-fit: fill;
        //  vertical-align: middle;
        position: relative;
        .exemptions {
          width: 100%;
          height: 3.946667rem;
        }
        .play {
          width: 0.933333rem;
          height: 0.933333rem;
          position: absolute;
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
      .vide_right {
        width: 4.813333rem;
        height: 3.946667rem;
        margin-left: 0.053333rem;
        //   position: relative;
        margin-top: 0.533333rem;
        //   overflow: hidden;
        // object-fit: fill;
        //  vertical-align: middle;
        position: relative;
        .exemptionss {
          width: 100%;
          height: 3.946667rem;
        }
        .play {
          width: 0.933333rem;
          height: 0.933333rem;
          position: absolute;
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    }
    .star_conter{
      width: 9.466667rem;
      margin: .4rem auto 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .star_goods{
        width: 29%;
        margin-right: 3%;
        background-color: #fff;
        border-radius: 0.133333rem;
        box-shadow: .053333rem .04rem .2rem .04rem rgba(0, 0, 0, 0.25), 0px 0px .04rem 0px rgba(0, 0, 0, 0.22);
        padding: .266667rem;
        position: relative;
        text-align: center;
        .sp{
          width: 2.293333rem;
          height: 2.493333rem;
          border-radius: .2rem;
        }
        .play{
            width: 0.933333rem;
            height: 0.933333rem;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .wen {
          width: 2.2rem;
          font-size: 0.36rem;
          color: #444;
          font-weight: 600;
          margin-top: 0.133333rem;
          overflow: hidden; /*超出部分隐藏*/
          white-space: nowrap; /*不换行*/
          text-overflow: ellipsis; /*超出部分文字以...显示*/
        }
      }
    }
    .star-conter {
      width: 9.466667rem;
      min-height: 4.04rem;
      margin: 0.266667rem auto 0;
      border-radius: 0.133333rem;
      // border: solid 1px #8a8a8a;
      // opacity: 0.82;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      .star-goods {
        background-color: #fff;
        text-align: center;
        padding: 0.266667rem;
        margin-right: 0.15rem;
        border-radius: 0.133333rem;
        img {
          width: 2.293333rem;
          height: 2.293333rem;
        }
        .wen {
          width: 2.2rem;
          height: 0.4rem;
          line-height: 0.4rem;
          font-size: 0.36rem;
          color: #7d7c7c;
          margin-top: 0.133333rem;
          overflow: hidden; /*超出部分隐藏*/
          white-space: nowrap; /*不换行*/
          text-overflow: ellipsis; /*超出部分文字以...显示*/
          margin-left: 0.266667rem;
        }
        .price {
          font-size: 0.42rem;
          color: #d2561a;
          margin-top: 0.133333rem;
        }
      }
      .star-goods:nth-child(3) {
        margin-right: 0;
      }
    }

   .star_footer{
     margin: .6rem 0;
     .daohans{
          width: 8.933333rem;
          margin: 0 auto;
          padding: .266667rem;
          background-color: #fff;
          border-radius: 0.133333rem;
          box-shadow: .053333rem .04rem .2rem .04rem rgba(0, 0, 0, 0.25), 0px 0px .04rem 0px rgba(0, 0, 0, 0.22);
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .d_list{
            width: 25%;
            text-align: center;
            .list_img{
              width: 1.333333rem;
              height: 1.333333rem;
              border-radius: 50%;
            }
            .list_t{
              font-size: .36rem;
              font-weight: 600;
              color: #333;
              margin-top: .133333rem;
            }
          }
     }
   }

    .star-footer {
      margin: 0.346667rem 0 0.533333rem 0;
      width: 10rem;
      height: 2.206667rem;
      background-color: #fff;

      border-radius: 0.133333rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .daohan {
        width: 25%;
        text-align: center;
        img {
          width: 1.333333rem;
          height: 1.333333rem;
          border-radius: 50%;
        }
        .dwc {
          font-size: 0.34rem;
          color: #333;
          margin-top: 0.106667rem;
        }
      }
    }
  }
  // 文章
  .consult-box {
    width: 10rem;
    .consult-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.4rem 0 0.2rem;
      margin-bottom: 0.4rem;
      background-color: #fff;
      .lefts {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-left: 0.2rem;
        img {
          width: 0.693333rem;
          height: 0.6667rem;
        }
        span {
          font-size: 0.42rem;
          color: #333;
        }
      }
      .rights {
        font-size: 0.38rem;
        color: #656565;
        cursor: pointer;
        margin-right: 0.4rem;
      }
    }
    .consult-conter {
      width: 9.2rem;
      padding: .266667rem 0;
      display: flex;
      justify-content: flex-start;
       background-color: #fff;
       box-shadow: 0px .106667rem .213333rem rgba(0, 0, 0, 0.08);
      margin: .266667rem auto 0;
      border-radius: .133333rem;
      .conter-right {
        width: 3.56rem;
        height: 2rem;
        margin-left: .133333rem;
        img {
          width: 3.56rem;
          height: 2rem;
          border-radius: 0.133333rem;
        }
      }
      .conter-left {
        margin-left: .2rem;
        .title {
          width: 4.8rem;
          font-size: .373333rem;
          color: #444;
          font-weight: 600;
          overflow: hidden; /*超出部分隐藏*/
          white-space: nowrap; /*不换行*/
          text-overflow: ellipsis; /*超出部分文字以...显示*/
        }
        .sub{
           width: 4.8rem;
          font-size: .32rem;
          color: #999;
          margin-top: .2rem;
           overflow: hidden; /*超出部分隐藏*/
          white-space: nowrap; /*不换行*/
          text-overflow: ellipsis; /*超出部分文字以...显示*/
        }
        .jituan {
          margin-top: 0.586667rem;
          .jts {
            font-size: 0.3rem;
            color: #a9adae;
          }
        }
      }
    }
    .consult-conter:nth-child(3) {
      border-bottom: 0;
    }
  }

  // 分割
  .limit-head {
    position: relative;
    height: 1rem;
    line-height: 0.5rem;
    text-align: center;
    i {
      display: block;
      height: 2px;
      background: #dadada;
      position: absolute;
      top: 0.9rem;
      width: 100%;
    }
    .jinxuan {
      display: inline-block;
      font-size: 0.4rem;
      font-weight: bold;
      color: #888787;
      background: #fff;
      padding: 0 0.875rem;
      text-align: center;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
  }

  .tushi {
    width: 3.666667rem;
    height: 3rem;
    background-color: #000000;
    opacity: 0.5;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    span {
      display: inline-block;
      font-size: 0.4rem;
      color: #fff;
      padding-top: 1.366667rem;
      padding-left: 1rem;
    }
  }
  .show_vds,.show_vd{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.5;
    z-index: 1;
  }
   .show_v,
  .show_vs {
    width: 10rem;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
     background-color: #000000;
    opacity: 0.9;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .close {
      background: orangered;
      font-size: 0.346667rem;
      color: #ffffff;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
      padding: 0.266667rem;
    }
    .exemption {
      width: 100%;
      height: 5.44rem;
    }
  }
  //  底部导航
  .bottom-tab {
    position: fixed;
    z-index: 3000;
    // background-image: url(../../assets/image/tab.png);
    background-color: #f7f6f6;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .bottom-tab-item-center {
      width: 24%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: -0.133333rem;
      .first-img {
        width: 1.333333rem;
        height: 1.333333rem;
        margin-top: -0.8rem;

        border-radius: 50%;
      }
      .text-position {
        margin-top: 0.066667rem;
        font-size: 0.25rem;
        color: #757575;
      }
      .text-on {
        color: #b49828;
      }
      .text-ons {
        color: #0eb173;
      }
    }
    .bottom-tab-item-sider {
      width: 15%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      .jiao {
        position: absolute;
        top: -0.186667rem;
        display: block;
        right: 0.08rem;
        min-width: 0.4rem;
        height: 0.4rem;
        padding: 0 0.026667rem;
        border-radius: 50%;
        background-color: #f5222d;
        text-align: center;
        line-height: 0.4rem;
        font-size: 0.373333rem;
        color: #ffffff;
      }
      .first-img {
        width: 0.613333rem;
        height: 0.613333rem;
      }
      .text-position {
        margin-top: 0.16rem;
        font-size: 0.25rem;
        color: #757575;
      }
      .text-on {
        color: #f7992b;
      }
      .text-ons {
        color: #0eb173;
      }
    }
  }
}
</style>
